<template>
    <div class="mg-tb">
        <div id="decs">
            <!--1.图片详情-->
            <div class="title">
                <h4>{{photoinfo.title}}</h4>
                <p>
                    <span>{{photoinfo.add_time | datefmt("YYYY-MM-DD HH:mm:ss")}}</span>
                    <span>{{photoinfo.click}}次点击</span>
                </p>
                <p class="line"></p>
            </div>
            <!--2.缩略图-->
            <!-- 利用mui实现九宫格 -->
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li v-for="(item, index) in list" :key="index" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <img class="preview-img" :src="item.src" height="100" @click="$preview.open(index, list)">
                </li>
            </ul>
            <!--图片详情 摘要部分-->
            <p>{{photoinfo.content}}</p>
        </div>
        <div id="comment">
            <comment :id="id"></comment>
        </div>
    </div>
</template>

<script>
import comment from '../subcom/comment.vue';
export default {
    components: {
        comment   //注册评论组件
    },
    data() {
        return {
            id: 0,  //图片的id
            photoinfo: {},    //图片详情描述数据对象 
            list: []    //缩略图
        }
    },
    created() {
        this.id = this.$route.params.id;
        this.getinfo();
        this. getimg();
    },
    methods: {
        getimg() {
            // 1.确定url /api/getthumimages/:imgid
            var url = "http://182.254.146.100:8899/api/getthumimages/" + this.id;
            this.$http.get(url).then(function (res) {
                var body = res.body;
                if (body.status != 0) {
                    Toast(body.message);
                    return;
                }
                //vue-preview要求的格式{src:w;h} 但是服务器回来的没有宽高 所以只能自己添加
                body.message.forEach(function(item) {
                    //获取图片的原始高宽设置给自定义高宽
                    var img = document.createElement('img');
                    img.src = item.src;
                    item.h = img.height;
                    item.w = img.width;
                });
                this.list = body.message;
            })
        },
        getinfo() {
            var url = "http://182.254.146.100:8899/api/getimageInfo/" + this.id;
            this.$http.get(url).then(function (res) {
                var body = res.body;
                if (body.status != 0) {
                    Toast(body.message);
                    return;
                }

                this.photoinfo = body.message[0];

            })
        }
    }
}
</script>

<style scoped>
#decs {
    padding: 10px;
}

#decs h4 {
    color: #099;
}

#decs p {
    color: #bbb;
}

#decs .line {
    height: 1px;
    width: 100%;
    background-color: #eee;
}

.mui-grid-view.mui-grid-9 {
    border-top: 0;
    border-left: 0;
    background: #fff;
}

.mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border-bottom: 0;
    border-right: 0;
}
</style>